<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { storeToRefs } from "pinia";
import useTaskDetailStore from "@/pinia/modules/taskDetailStore";

const props = defineProps({
  id: {
    type: String,
    required: true,
  },
});

const taskDetailStore = useTaskDetailStore();

const { taskDetail } = storeToRefs(taskDetailStore);

/*获取任务详情的函数*/
const fetchTaskDetail = async () => {
  try {
    await taskDetailStore.fetchTaskDetail(props.id);
  } catch (error) {
    uni.showToast({ title: error.message, duration: 2000, icon: "error" });
  }
};

onLoad(() => {
  fetchTaskDetail();
});

</script>

<template>
  <view class="page-container">
    <view class="search-bar">
      <!-- #ifndef H5 -->
      <text class="iconfont icon-scan"></text>
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <text class="iconfont icon-search"></text>
      <!-- #endif -->
      <input class="input" type="text" placeholder="输入运单号" />
    </view>
    <scroll-view scroll-y class="task-detail">
      <view class="scroll-view-wrapper">

        <view class="basic-info panel">
          <view class="panel-title">基本信息</view>
          <view class="timeline">
            <view class="line">{{ taskDetail.startAddress }}</view>
            <view class="line">{{ taskDetail.endAddress }}</view>
            <navigator hover-class="none" url="/subpkg_task/guide/index" class="guide">
              <text class="iconfont icon-guide"></text>
              <text>开始导航</text>
            </navigator>
          </view>
          <view class="info-list">
            <view class="info-list-item">
              <text class="label">任务编号</text>
              <text class="value">{{ taskDetail.transportTaskId }}</text>
            </view>

            <template v-if="taskDetail.status>=1">
              <view class="info-list-item">
                <text class="label">提货联系人</text>
                <text class="value">{{ taskDetail.startHandoverName }}</text>
              </view>
              <view class="info-list-item">
                <text class="label">提货人电话</text>
                <text class="value">{{ taskDetail.startHandoverPhone }}</text>
              </view>
              <view class="info-list-item">
                <text class="label">预计提货时间</text>
                <text class="value">{{ taskDetail.planDepartureTime }}</text>
              </view>
              <view class="info-list-item">
                <text class="label">实际提货时间</text>
                <text class="value">{{ taskDetail.actualDepartureTime || "未知时间" }}</text>
              </view>
            </template>

            <template v-if="taskDetail.status===2">
              <view class="hr"></view>
              <view class="info-list-item">
                <text class="label">交付联系人</text>
                <text class="value">{{ taskDetail.finishHandoverName }}</text>
              </view>
              <view class="info-list-item">
                <text class="label">交付人电话</text>
                <text class="value">{{ taskDetail.finishHandoverPhone }}</text>
              </view>
              <view class="info-list-item">
                <text class="label">预计送达时间</text>
                <text class="value">{{ taskDetail.planArrivalTime }}</text>
              </view>
              <view class="info-list-item">
                <text class="label">实际送达时间</text>
                <text class="value">{{ taskDetail.actualArrivalTime || "未知时间" }}</text>
              </view>
            </template>
          </view>

        </view>

        <view class="except-info panel">
          <view class="panel-title">异常信息</view>
          <template v-if="taskDetail.exceptionList">
            <view class="info-list" v-for="(item,index) in taskDetail.exceptionList">
              <view class="info-list-item">
                <text class="label">上报时间</text>
                <text class="value">{{ item.exceptionTime || "未知时间" }}</text>
              </view>
              <view class="info-list-item">
                <text class="label">异常类型</text>
                <text class="value">{{ item.exceptionType || "未知类型" }}</text>
              </view>
              <view class="info-list-item">
                <text class="label">处理结果</text>
                <text class="value">{{ item.handleResult }}</text>
              </view>
            </view>
          </template>
          <template v-else>
            <view style="text-align: center;font-size: 25rpx">暂无异常信息</view>
          </template>
        </view>

        <view class="panel pickup-info">
          <view class="panel-title">提货信息</view>
          <view class="label">提货凭证</view>
          <view class="pictures">
            <image class="picture" v-for="(item,index) in taskDetail.cargoPickUpPictureList" :src="item.url" :key="index"></image>
            <view v-if="!taskDetail.cargoPickUpPictureList" class="picture-blank">暂无图片</view>
          </view>
          <view class="label">货品照片</view>
          <view class="pictures">
            <image class="picture" v-for="(item,index) in taskDetail.cargoPictureList" :src="item.url" :key="index"></image>
            <view v-if="!taskDetail.cargoPickUpPictureList" class="picture-blank">暂无图片</view>
          </view>
        </view>

        <view class="delivery-info panel">
          <view class="panel-title">交货信息</view>
          <view class="label">交货凭证</view>
          <view class="pictures">
            <image class="picture" v-for="(item,index) in taskDetail.certificatePictureList" :src="item.url" :key="index"></image>
            <view v-if="!taskDetail.certificatePictureList" class="picture-blank">暂无图片</view>
          </view>
          <view class="label">货品照片</view>
          <view class="pictures">
            <image class="picture" v-for="(item,index) in taskDetail.deliverPictureList" :src="item.url" :key="index"></image>
            <view v-if="!taskDetail.deliverPictureList" class="picture-blank">暂无图片</view>
          </view>
        </view>

      </view>
    </scroll-view>
    <!--按钮的状态-->
    <view class="toolbar" v-if="taskDetail.status===1">
      <navigator :url="`/subpkg_task/delay/index?id=${taskDetail.id}&planDepartureTime=${taskDetail.planDepartureTime}`" hover-class="none" class="button secondary">延迟提货</navigator>
      <navigator :url="`/subpkg_task/pickup/index?id=${taskDetail.id}`" hover-class="none" class="button primary">提货</navigator>
    </view>
    <view class="toolbar" v-if="taskDetail.status===2">
      <navigator :url="`/subpkg_task/except/index?transportTaskId=${taskDetail.transportTaskId}`" hover-class="none" class="button secondary">异常上报</navigator>
      <navigator :url="`/subpkg_task/delivery/index?id=${taskDetail.id}`" hover-class="none" class="button primary">交付</navigator>
    </view>
    <view class="toolbar" v-if="taskDetail.status===4">
      <navigator :url="`/subpkg_task/record/index?transportTaskId=${taskDetail.transportTaskId}&actualDepartureTime=${taskDetail.actualDepartureTime}`" hover-class="none" class="button primary block">回车登记</navigator>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import './index.scss';

.hr {
  margin: 20rpx;
  border: 1px solid #f4f4f4;
}
</style>
